<template>
     <contextMenu :menu="menuList">
    <div 
        class="content-chart h-full flex" 
        :style="{
            width:width
        }"
        :class="{isHide:!dataviewLayoutState.isShowChartList}"
    >
       
            <!-- 右侧图表菜单栏 -->
            <side-menu
                :menu-opts="menuOpts"
                :menu-sub2="menuSub2" 
                :total-width="topWidth"
                :self-width="sideMenuWidth"
                v-model:open-keys-sub1="openKeysSub1"
                v-model:open-keys-sub2="openKeysSub2"
                v-model:selected-keys-sub1="selectedKeysSub1"
                v-model:selected-keys-sub2="selectedKeysSub2"
                @handle-sub1-click="handleSub1Click"
                @handle-sub2-click="handleSub2Click"
            />
            <!-- 左侧图片展示列表 -->
            <img-list 
                class="img-list-container"
                :chart-config="imgListData" 
                :total-width="topWidth"
                :self-width="imgListWidth"
            />

        </div>
    </contextMenu>
</template>

<script setup lang="ts">
import { computed, withDefaults } from 'vue';
import sideMenu from './sideMenu.vue';
import imgList from './imgList.vue';
import { useAsideMenu } from './hooks/useAsideMenu';
import { onBeforeMount } from 'vue';
import { useDataViewLayoutStore } from '@/stores/dataviewLayout';
import { storeToRefs } from 'pinia';
import contextMenu from '@/components/context-menu/index.vue'


const menuList = [
    {
        label: '重置',
        icon: 'el-icon-refresh',
        click: () => {
            console.log('重置')
        }
    },
    {
        label: '缩小操作',
        icon: 'el-icon-minus',
        click: () => {
            console.log('缩小')
        }
    },
        {
        label: '缩小操作',
        icon: 'el-icon-minus',
        click: () => {
            console.log('缩小')
        }
    }
]



const dataviewLayoutStore = useDataViewLayoutStore()
const {dataviewLayoutState} = storeToRefs(dataviewLayoutStore)
const sideMenuWidth = 130
const imgListWidth = 200

const props = withDefaults(defineProps<{
    topWidth?:number|string
}>(),{
    topWidth:330
})
const {menuOpts,openKeysSub1,selectedKeysSub1,openKeysSub2,selectedKeysSub2,menuSub2,imgListData,handleSub1Click,initSub1Menu,initSub2Menu,handleSub2Click} = useAsideMenu()

const width = computed(()=>{
    if(dataviewLayoutState.value.isShowChartList){
        return props.topWidth + 'px'
    }
    return 65 + 'px'
})

onBeforeMount(()=>{
    initSub1Menu()
    initSub2Menu()
})
</script>


<style lang="scss" scoped>
.isHide{
    width: 65px!important;
    overflow: hidden;
    transition: all 0.3s ease;
}
.content-chart{
}
.img-list-container{
    width: 100%;
    transition: all 0.3s ease;
}
</style>